<script setup lang="ts">
import {ref, onMounted, reactive} from "vue";
import useStore from "../../modules/store/Authority"
import {ElMessageBox, FormInstance} from "element-plus";
const store = useStore()
// console.log(store.dynamic)
// 数据渲染的列表
// const searchList = computed(() => store.dynamic());
// console.log(searchList.value.length)
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false)
// @ts-ignore
let key: number = ref(0)

const editFrom = ref<FormInstance>()
const formInline = reactive({
  AccountNumber: '',
  name: '',
  number: '',
  Authority: '',
  password: '',
  Position: '',
  time: ''
})
const submitFormEdit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:boolean) => {
    if (valid) {
      dialogVisible.value = false
      // formInline. = store.list.length+1
      console.log(key)
      store.editA(formInline,key)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 修改内容的事件触发
// fetchData(currentPage.value);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
// const onSubmit = () => {
//   // console.log(formInline.value)
//   dialogVisible.value = false
//   store.editA(formInline,key)
// }
const handleEdit = (index: number, row: any) => {
  console.log(row, index)
  dialogVisible.value = true
  key = row.key
  formInline.AccountNumber= row.AccountNumber
  formInline.name= row.name
  formInline.number= row.number
  formInline.Authority= row.Authority
  formInline.password= row.password
  formInline.Position= row.Position
  formInline.time= row.time
}
// 渲染完成时发送一个请求
onMounted(()=>{
  // store.request()
});
const selectionChange =(row:any)=>{
    console.log(row)
  const keyArr:Array<any> = [];
    row.forEach((item:any)=>{
      keyArr.push(item.key)
    })
  store.keyArrA(keyArr)
}
</script>

<template>
  <el-table :data="store.searchListA"
            @selection-change ='selectionChange'
            max-height="230"
            style="width: 100%;margin: 30px 0">
    <el-table-column type="selection" width="55"/>
    <el-table-column label="员工编号" width="80">
      <template #default="scope">
        {{scope.row.key}}
      </template>
    </el-table-column>
    <el-table-column label="账号" width="100">
      <template #default="scope">
        {{scope.row.AccountNumber}}
      </template>
    </el-table-column>
    <el-table-column label="姓名" width="180">
      <template #default="scope">
        {{scope.row.name}}
      </template>
    </el-table-column>
    <el-table-column label="手机号" width="180">
      <template #default="scope">
        {{scope.row.number}}
      </template>
    </el-table-column>
    <el-table-column label="职位" width="180">
      <template #default="scope">
        {{scope.row.Position}}
      </template>
    </el-table-column>
    <el-table-column label="权限" width="180">
      <template #default="scope">
        {{scope.row.Authority}}
      </template>
    </el-table-column>
    <el-table-column label="添加时间" width="180">
      <template #default="scope">
        {{scope.row.time}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"  style="color: #ffb300" link  @click="handleEdit(scope.$index, scope.row)"
        >修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="dialogVisible"
      title="修改个人信息"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" ref="editFrom" :model="formInline" class="demo-form-inline">
      <el-form-item
          prop="AccountNumber"
          :rules="[
                    { required: true, message: '请输入账号' },
                    { type: 'string', message: '账号类型未字符串' },
                  ]"
          label="账号">
        <el-input v-model.trim="formInline.AccountNumber" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="name"
          :rules="[
                    { required: true, message: '请输入姓名' },
                    { type: 'string', message: '名字的类型未字符串' },
                  ]"
          label="姓名">
        <el-input v-model.trim="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="number"
          :rules="[
                    { required: true, message: '手机号为空' },
                    { type: 'string', message: '请满足正确的类型' },
                    {
                      pattern: /^[1][3-9][0-9]{9}$/,
                      message: '需要正确的手机号',
                      trigger: 'blur'
                    },
                  ]"
          label="手机号">
        <el-input v-model.trim="formInline.number" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="Position"
          :rules="[
                    { required: true, message: '输入自己的职位' },
                    { type: 'string', message: '输入正确的类型' },
                  ]"
          label="职位">
        <el-input v-model.trim="formInline.Position" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="Authority"
          :rules="[
                    { required: true, message: '输入权限' },
                    { type: 'string', message: '输入正确的类型' },
                  ]"
          label="权限">
        <el-input v-model.trim="formInline.Authority" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="password"
          type="password"
          :rules="[
                    { required: true, message: '未输入密码' },
                    { type: 'string', message: '类型需要是字符串' },
                     {
                      pattern: /^(?=.*[A-Za-z ])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/,
                      message: '需要大写一个，一个特殊字符，还满足8个字符以上',
                      trigger: 'blur'
                    },
                  ]"
          label="密码">
        <el-input v-model.trim="formInline.password" placeholder="请输入密码" clearable />
      </el-form-item>
      <el-form-item
          prop="time"
          :rules="[
                    { required: true, message: '请输入一个时间点' },
                    { type: 'string', message: '时间点类型错误' },
                  ]"
          label="添加时间">
        <el-date-picker
            v-model.trim="formInline.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Pick a date"
            :default-value="new Date(2023, 7, 14)"/>
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="primary" @click="submitFormEdit(editFrom)">修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
